<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/animate.css">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <title>Document</title>
    <style>
         .box{
            width:50%;
            height:300px;
            border:1px solid #999;
            border-radius: 10px;
            background: darkcyan;

        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}} </h2>

        <!-- 5.路由出口 路由匹配到的组件将渲染在这里 -->
        <router-view class="box"></router-view>

        <hr>
        <!-- 6.路由跳转 声明式 -->
        <a href="#/home">首页1</a>
        <router-link to="/home">首页</router-link>
        <router-link to="/find">发现</router-link>
        <router-link to="/mine">我的</router-link>
        <router-link to="/aboutus">联系我们</router-link>
        <router-link to="/404">404</router-link>
    </div>

    <template id="home">
        <div>
            <h2>HOme = Home = Home</h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>Mine - MIne - 个人中心</h2>
        </div>
    </template>

    <script>

        // 1.定义路由组件
        const Home = {
            template:'#home'
        }
        const Find = {
            template:'<h2>Find - Find - Find</h2>'
        }
        const Mine = {
            template:"#mine"
        }
        const NotFound = {
            template:"<h2>404-400 - NotFound</h2>"
        }
        const Aboutus = {
            template:"<h2>关于我们 - aboutus - abouts</h2>"
        }

        // 2.定义一些路由
        //每个路由都需要映射一个组件
        const routes = [
            {path:'/home',component:Home},
            {path:'/find',component:Find},
            {path:'/mine',component:Mine},
            {path:'/aboutus',component:Aboutus},

            {
                path:"/404",component:NotFound
            }
        ]

        // 3. 创建路由实例并传递 `routes` 配置 你可以在这里输入更多的配置
        //# 表示 hash 路由
        const router = new VueRouter({
            routes:routes
        })

        // 4.路由挂载到根实例
        const vm = new Vue ({
            router,
            data:{
                title:"Vue 路由初步"
            },
            watch:{
                '$route':function(to,from){
                    console.log(to);
                    console.log(from);
                }
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title
                console.log(this.$router);
                console.log(this.$route);
            }
        }).$mount('#app')
    </script>
</body>
</html>